<template>
  <button @click="刷新()">详情</button>

  <!-- <vxe-button type="text" status="primary" content="详情" @click="刷新(tableData.data1)"></vxe-button> -->
  <vxe-modal v-model="详情显示" width="900" show-zoom fullscreen>
    <p>
      <b>
        新增账号或者解绑账号后需要点左边保存按钮
      </b>
      <vxe-button status="success" content="保存修改" @click="保存修改"></vxe-button>

      <input v-model="新增绑定的账号" type="input" width="500" height="128" />
      <vxe-button content="添加账号" status="primary" icon="vxe-icon--plus" @click="新增绑定"></vxe-button>

      <vxe-button @click="解绑账号(所有账号[i])" v-for="(item ,i ) in 所有账号" :key="i" status="danger" :content="'解绑账号:'+所有账号[i]">解绑账号:{{所有账号[i]}}</vxe-button>

    </p>
    <div v-for="(item ,i ) in 所有账号" :key="所有账号[i]">
      <fxglb :gameusername='所有账号[i]'></fxglb>

    </div>
  </vxe-modal>

</template>

<script>
import fxglb from "../账号管理/分区管理c";
import { defineComponent, reactive, ref } from "vue";
import { VXETable, VxeTableInstance } from "vxe-table";
export default {
  components: { fxglb },
  data() {
    return {
      所有账号: [],
      详情显示: false,
      新增绑定的账号: "",
    };
  },
  methods: {
    刷新: function (要显示的数据) {
      this.所有账号 = [];
      let data = JSON.parse(this.tableData.绑定对象);
      console.log(data);
      for (var key in data) {
        console.log(key);
        this.所有账号.push(key);
      }
      this.所有账号 = JSON.parse(JSON.stringify(this.所有账号));
      console.log(this.所有账号);
      this.详情显示 = true;
    },
    新增绑定: function () {
      for (var i = this.所有账号.length - 1; i >= 0; i--) {
        if (this.所有账号[i] == this.新增绑定的账号) {
          this.$XModal.alert({ content: "重复的账号.请检查", status: "error" });
          return;
        }
      }
      var T = this;
      this.$axios
        .post(T.$route.query.admin + "/设备添加一个账号", {
          账号: T.新增绑定的账号,
          设备: T.tableData.账号,
        })
        .then(function (response) {
          T.$XModal.message({ content: "添加成功", status: "success" });
        })
        .catch(function (error) {
          alert("添加失败");
        });
      this.所有账号.push(this.新增绑定的账号);
    },
    解绑账号: function (账号) {
      console.log(账号);

      var T = this;
      this.$axios
        .post(T.$route.query.admin + "/设备删除一个账号", {
          账号: 账号,
          设备: T.tableData.账号,
        })
        .then(function (response) {
          T.$XModal.message({ content: "删除成功", status: "success" });

          for (var i = T.所有账号.length - 1; i >= 0; i--) {
            console.log(T.所有账号[i]);
            if (T.所有账号[i] == 账号) {
              T.所有账号.splice(i, 1);
            }
          }
        })
        .catch(function (error) {
          alert("刷新失败");
        });
    },
    保存修改: function () {
      console.log(JSON.stringify(this.所有账号));
    },
  },
  props: ["tableData"],
};
</script>


<style>
.vxe-button.type--button.theme--my-purple,
.vxe-button.type--button.theme--my-purple:hover {
  color: #fff;
}
.vxe-button.type--button.theme--my-purple {
  background-color: #006400;
}
.vxe-button.type--button.theme--my-purple:active {
  background-color: #a50aa5;
}
.my-green {
  color: #008000;
}
.my-primary {
  color: #3196ff;
}
.my-success {
  color: #67c23a;
}
.my-info {
  color: #909399;
}
.my-warning {
  color: #e6a23c;
}
.my-danger {
  color: #f56c6c;
}
</style>